<template>
	<view class="" v-if="loading">
		<view class="tabs">
			<up-tabs :list="list1" style="width: 100%;" :lineWidth='40' lineColor='#40d2d3'
				:scrollable='false'></up-tabs>
		</view>
		<view class="" v-if="taskData && taskData.emergencyTaskVo">
			<up-card :show-head="false">
				<template #body>
					<view class="patientName">
						<view class="formLabel">
							患者姓名：
						</view>
						<up-tag class="tag" size="mini"
							v-for="item in taskData.emergencyTaskVo.patientInfoList[0].preInspectPatientInfoList"
							:key="item.id">{{ item.patientName }}</up-tag>
					</view>
					<view class="patientSex">
						<view class="formLabel">
							患者性别：
						</view>
						<up-tag class="tag"
							v-for="item in taskData.emergencyTaskVo.patientInfoList[0].preInspectPatientInfoList"
							size="mini" :key="item.id">{{ item.patientSex }}</up-tag>
					</view>
					<view class="patientAge">
						<view class="formLabel">
							患者年龄：
						</view>
						<up-tag class="tag" size="mini"
							v-for="item in taskData.emergencyTaskVo.patientInfoList[0].preInspectPatientInfoList"
							:key="item.id">{{ item.patientAge || '/' }}</up-tag>
					</view>
					<view class="number">
						<view class="formLabel">
							救护车车牌：
						</view>
						<up-tag class="tag" size="mini" v-for="item in taskData.emergencyTaskVo.carInfo"
							:key="item.carId">{{ item.number }}</up-tag>
					</view>
					<view class="mold">
						<view class="formLabel">
							出车地点：
						</view>
						<view class="">
							{{ taskData.emergencyTaskVo.taskAddress }}
						</view>
					</view>
					<view class="mold">
						<view class="formLabel">
							实时位置：
						</view>
					</view>
					<view class="" style="width: 100%;height: 500rpx;">
						<map :scale="7" :polyline="polylines" :markers="mapConfig" id="mapId" :latitude="latitude"
							:longitude="longitude" style="width: 100%;height: 500rpx;margin-top: 20rpx;"></map>
						<!-- <image src="../../static/img/dian.png" mode=""></image> -->
					</view>

					<up-button @click="goMap">唤起高德地图</up-button>
				</template>
			</up-card>
		</view>
		<Empty v-else></Empty>
	</view>
</template>

<script setup>
import {
	reactive,
	toRef,
	ref
} from "vue"
// 引入空页面组件
import Empty from '../../components/empty.vue';
// import dian from "../../static/img/dian"
// 引入获取任务列表的接口
import {
	getTaskList
} from '@/api/task';
import {
	onShow,
	onHide
} from '@dcloudio/uni-app'
const list1 = reactive([{
	name: '当前任务'
}, {
	name: '群伤任务'
}, {
	name: '已完成任务'
}])
// 任务列表加载状态
const loading = ref(false)
const longitude = ref(104.075248) // 经度
const latitude = ref(30.688579) // 纬度
// 连线配置项
let polylines = reactive([{
	points: [],
	// 颜色
	color: "#1bac2e",
	// 宽度
	width: 10,
	// 箭头
	arrowLine: true,
	arrowIconPath: true,
}])
// 地图配置项
let mapConfig = reactive([{
	id: 0,
	latitude: 30.611862, //纬度
	longitude: 103.896193, //经度
	iconPath: '/static/img/dian.png', //显示的图标        
	rotate: 0, // 旋转度数
	width: 20, //宽
	height: 30, //高
	//   title:'我在这里',//标注点名
	alpha: 0.5, //透明度
	callout: { //自定义标记点上方的气泡窗口 点击有效  
		content: '', //文本
		color: '#ffffff', //文字颜色
		fontSize: 14, //文本大小
		borderRadius: 15, //边框圆角
		borderWidth: '10',
		bgColor: '#e51860', //背景颜色
		display: 'ALWAYS', //常显
	},
},
{
	id: 1234597,
	latitude: 23.106574, //纬度
	longitude: 113.324587, //经度
	iconPath: '/static/img/dian.png', //显示的图标        
	rotate: 0, // 旋转度数
	width: 20, //宽
	height: 30, //高
	//  title:'我在这里',//标注点名
	alpha: 0.5, //透明度
	//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
	//   color:'red',//文本颜色
	//      },
	callout: { //自定义标记点上方的气泡窗口 点击有效  
		content: '广州塔', //文本
		color: '#ffffff', //文字颜色
		fontSize: 14, //文本大小
		borderRadius: 15, //边框圆角
		borderWidth: '10',
		bgColor: '#e51860', //背景颜色
		display: 'ALWAYS', //常显
	},
},
])

// 任务列表数组
let taskData = reactive({})
// 使用onLoad钩子函数获取任务列表
onShow(() => {
	getTask()
})
// 调用获取任务列表的接口
const getTask = () => {
    // 获取当前登录用户的Id
    const userId = uni.getStorageSync('userInfo').userId
    // 调用getTaskList接口获取任务列表
    getTaskList({
        userId
    }).then(res => {
        // 将获取到的任务数据赋值给taskData
        taskData = res.data
        // 更新经度值
        longitude.value = taskData.emergencyTaskVo.taskLongitude
        // 更新纬度值
        latitude.value = taskData.emergencyTaskVo.taskLatitude
        // 更新地图配置的纬度
        mapConfig[1].latitude = taskData.emergencyTaskVo.taskLatitude
        // 更新地图配置的经度
        mapConfig[1].longitude = taskData.emergencyTaskVo.taskLongitude
        // 更新地图标注的内容
        mapConfig[1].callout.content = taskData.emergencyTaskVo.taskAddress
        // 调用获取位置信息的函数
        getLocation()
    })
}
// 调用高德地图接口获取当前位置信息
const getLocation = () => {
    uni.request({
        // 请求高德地图API以获取地理位置信息
        url: `http://110.191.238.10:8060/map/geocode/geo/${taskData.emergencyTaskVo.schedulingSite}`,
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            // 从本地存储获取授权令牌
            "authorization": uni.getStorageSync('token')
        },
        success: (res) => {
            // 解析响应数据，提取经度和纬度
            let data = res.data.data.geocodes[0].location.split(",")
            // 更新地图配置的纬度
            mapConfig[0].latitude = data[1]
            // 更新地图配置的经度
            mapConfig[0].longitude = data[0]
            // 更新当前位置的纬度
            latitude.value = data[1]
            // 更新当前位置的经度
            longitude.value = data[0]
            // 更新地图标记的显示内容
            mapConfig[0].callout.content = taskData.emergencyTaskVo.schedulingSite
            // 调用获取路径规划的函数
            getRoute()
        }
    })
}
// 获取路径规划
const getRoute = () => {
    // 构造请求参数，包括起点坐标和终点坐标
    let params =
        `origin=${longitude.value + ',' + latitude.value}&destination=${mapConfig[1].longitude + ',' + mapConfig[1].latitude}&key=9d93039fbdf7ccac43f87256591e432c`

    // 发起HTTP请求获取路径规划数据
    uni.request({
        url: `https://restapi.amap.com/v3/direction/driving?${params}`,
        success: (res) => {
            // 解析响应数据，获取路径信息
            let data = res.data.route
            // 检查路径信息是否有效，然后处理路径数据
            if (data.paths && data.paths[0] && data.paths[0].steps) {
                washData(data.paths[0].steps)
            }
            // 加载完成，设置加载状态为true
            loading.value = true
        }
    })
}
/**
* 洗净数据函数
* 该函数用于处理和清洗传入的步骤数据，将其转换为包含经纬度点的数组
* 主要用于处理带有轨迹数据的步骤，将轨迹数据转换为地图上可使用的经纬度坐标
* 
* @param {Array} steps - 包含步骤信息的数组，每个步骤包含一条polyline数据
*/
const washData = (steps) => {
	// 初始化一个空数组，用于存储所有的经纬度点
	let points = []
	// 初始化一个包含多项线条属性的数组，用于地图上绘制轨迹
	// 其中包括颜色、宽度、箭头等样式设置
	polylines = [{
		points: [],
		// 颜色
		color: "#1bac2e",
		// 宽度
		width: 4,
		// 箭头
		arrowLine: true,
		arrowIconPath: true,
	}]
	// 遍历每个步骤，处理每一步的polyline数据
	steps.forEach(item => {
		// 将polyline数据按';'分割，得到一系列坐标点
		const polen = item.polyline.split(';')
		polen.forEach(vv => {
			// 将每个坐标点按','分割，得到经纬度
			let splits = vv.split(',')
			// 将经纬度转换为浮点数，并添加到polylines数组的第一个元素的points数组中
			polylines[0].points.push({
				longitude: parseFloat(splits[0]),
				latitude: parseFloat(splits[1])
			})
		})
	})
}
// 跳转高德地图
const goMap = () => {
	// 编码任务地址信息，为地图导航做准备
	const destination = {
		name: encodeURIComponent(taskData.emergencyTaskVo?.taskAddress) || "目的地",
		latitude: taskData.emergencyTaskVo?.taskLatitude || 39.908823,
		longitude: taskData.emergencyTaskVo?.taskLongitude || 116.397470
	};

	let url;
	// 根据平台类型选择合适的地图跳转URL格式
	if (uni.getSystemInfoSync().platform === 'android') {
		url = `androidamap://navi?sourceApplication=appname&poiname=${destination.name}&lat=${destination.latitude}&lon=${destination.longitude}&dev=0&t=0&style=0&start=&auto=1&rtdType=1&naviBy=car`;
	} else {
		url = `iosamap://navi?sourceApplication=myApp&name=${destination.name}&lat=${destination.latitude}&lon=${destination.longitude}&dev=0&t=0&naviBy=car`;
	}

	// 处理APP环境跳转
	// #ifdef APP-PLUS
	console.log("高德地图 URL:", url);

	// 检查是否安装高德地图应用
	const isAmapInstalled = plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap', action: 'androidamap://' });
	console.log("高德地图是否安装:", isAmapInstalled);

	// 如果未安装高德地图，提示用户下载
	if (!isAmapInstalled) {
		uni.showModal({
			title: "提示",
			content: "未检测到高德地图，是否前往下载？",
			success(res) {
				if (res.confirm) {
					plus.runtime.openURL("https://www.amap.com/");
				}
			},
			fail(err) {
				console.log("显示模态框失败:", err);
			}
		});
		return;
	} else {
		// 延迟打开URL，确保应用准备就绪
		setTimeout(() => {
			plus.runtime.openURL(url, (err) => {
				console.log('OpenURL callback:', err);
			});
		}, 1000);
	}
	// #endif
}
</script>

<style lang="scss" scoped>
.tabs {
	background-color: white;
	padding: 10rpx 0;
	border-bottom: 1rpx solid #eee;
}

.patientName {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.patientSex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 20rpx;
}

.patientAge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 20rpx;
}

.number {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
}

.tag {

	margin-right: 10rpx;
}

.formLabel {
	width: 180rpx;

}

.mold {
	display: flex;
	margin-top: 20rpx;
}
</style>